<template>
	<view class="commission-transfer-balance">
		<view class="card-item">
			<text>转出到：</text>
			<image class="symbol-icon" src="http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/balance-symbol-icon.png"></image>
			<text>余额</text>
		</view>
		<view class="card-item">
			<view class="title">转出金额</view>
			<view class="input-box">
				<text class="symbol">￥</text>
				<input v-model="transferOut" placeholder="请输入提现金额" placeholder-style="color: #dcdcdc" />
				<text class="all-text-btn" @click="onAllBtn">全部</text>
			</view>
			<view class="transferable">可转出金额：{{ transferableAmount }}元</view>
		</view>
		<button class="btn">确认转出</button>
	</view>
</template>

<script setup lang='ts'>
	import { ref } from 'vue';
	
	const transferOut = ref('');
	
	const transferableAmount = ref('345,544.00');
	
	const onAllBtn = () => {
		transferOut.value = transferableAmount.value;
	}
	
</script>

<style scoped lang='scss'>
	.commission-transfer-balance{
		height: 100vh;
		padding: 30rpx;
		background-color: #f5f7fb;
		.card-item{
			font-weight: bold;
			padding: 30rpx;
			border-radius: 30rpx;
			margin-bottom: 30rpx;
			box-shadow: 1px 1px 5px #dcdcdc;
			background-color: #fff;
			&:nth-child(1){
				display: flex;
				align-items: center;
				.symbol-icon{
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}
			.input-box{
				font-size: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 30rpx 0;
				input{
					flex: 1;
					margin-left: 10rpx;
				}
				.symbol{
					font-size: 40rpx !important;
				}
				.all-text-btn{
					color: #44a897;
				}
			}
			.transferable{
				padding-top: 30rpx;
				border-top: 1px solid #dcdcdc;
			}
		}
		.btn {
			background-color: #44a897;
			color: #fff;
			font-size: 30rpx;
			margin-top: 60rpx;
			border-radius: 40rpx;
		}
		
	}
</style>
